{{include './index_header.html' '搜索'}}
<style>
    .song{
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* width: 90%; */
    }
    .mui-spinner{
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    h3,h4{
        /* justify-self: center; */
        text-align: center;
    }
</style>
<div class="mui-content">
    <form action="">
        <div class="mui-input-row mui-search">
            <input type="search" class="mui-input-clear" autocomplete="off"  id="keywords" placeholder="">
        </div>
    </form>

    <ul class="mui-table-view">
        <li>
            搜点什么吧
        </li>
        
    </ul>
</div>


<script>
    $('form').submit(function(e){
        e.preventDefault()
        var keyword = $('#keywords').val()
        console.log(keyword);
        $('.mui-table-view').html(`
        <h3>
            <span class="mui-spinner"></span>
            <h4>加载中</h4>
        </h3>
        `)
        $.get('https://wyy-nine.vercel.app/search?keywords='+keyword,function(data){
            console.log(data);
            var str = ''
            data.result.songs.forEach((item,index)=>{
                var singers = ''
                item.artists.forEach((x)=>{
                    singers += x.name + '&nbsp;'
                })
                str += `
                <li class="mui-table-view-cell" data-id="${item.id}"><span class="song">${item.name}-----${singers} </span>
                </li>
                
                `
            })
            
            $('.mui-table-view').html(str)
        })
    })
    $('.mui-table-view').on('click','.mui-table-view-cell',function(){
        location.href = '/play?id='+$(this).data().id
    })
</script>
</body>
</html>